<template>
    <div class="panel-body">
        <div class="panel-header">
            <div class="panel-title">
                {{ meta_name }}
            </div>
            <el-tabs v-model="params.status" type="card" @tab-click="list()">
                <el-tab-pane label="全 部" name="0"></el-tab-pane>
                <el-tab-pane label="正 常" name="1"></el-tab-pane>
                <el-tab-pane label="锁 定" name="2"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="panel-main">
            <div class="panel-btns">
                <el-button type="success" icon="fa fa-refresh" @click="list()" size="small"> 刷新</el-button>
                <el-button type="primary" icon="fa fa-plus" @click="create()" size="small"> 新增</el-button>
            </div>
            <div class="panel-search">
                <div class="panel-search-item">
                    <el-input  size="medium" v-model="params.kwd" clearable placeholder="请输入友情链接名称" class="input-with-select">
                        <el-button type="primary" @click="search()"  slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </div>
            <el-table v-loading="loading"
                      element-loading-text="努力加载中..."
                      element-loading-spinner="el-icon-loading"
                      ref="multipleHandle"
                      tooltip-effect="dark"
                      :data="listData.data" border>
                <el-table-column align="center" prop="id" label="编号" width="55"></el-table-column>
                <el-table-column prop="title" label="名称" :show-overflow-tooltip="true" width="150"></el-table-column>
                <el-table-column prop="link" label="链接" :show-overflow-tooltip="true" width="200"></el-table-column>
                <el-table-column align="center" prop="sort" label="排序" width="70"></el-table-column>
                <el-table-column align="center" prop="target_text" label="新窗口" width="70">
                    <template slot-scope="scope">
                        <span v-html="scope.row.target_text"></span>
                    </template>
                </el-table-column>
                <el-table-column align="center" prop="status_text" label="状态" width="70">
                    <template slot-scope="scope">
                        <span v-html="scope.row.status_text"></span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" >
                    <template slot-scope="scope">
                        <el-button @click="edit(scope.row)" icon="fa fa-edit" type="primary" size="mini" plain> 编辑</el-button>
                        <el-button v-if="scope.row.status == 1" @click="lock(scope.row.id)" icon="fa fa-lock" type="danger" size="mini" plain> 锁定</el-button>
                        <el-button v-if="scope.row.status == 2" @click="active(scope.row.id)" icon="fa fa-unlock-alt" type="primary" size="mini" plain> 启用</el-button>
                        <el-button @click="destroy(scope.row.id)" icon="fa fa-trash" type="info" size="mini" plain> 删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination"  v-if="!loading && listData && listData.total">
                <div class="pagination-total">共 <em> {{listData.total}} </em> 条记录</div>
                <el-pagination v-if="listData.last_page > 1"
                               background
                             :page-size="parseInt( listData.per_page)"
                               layout="prev, pager, next, jumper"
                               :total="listData.total"
                               prev-text="上一页"
                               next-text="下一页"
                               :current-page="listData.current_page"
                               @current-change="changePage">
                </el-pagination>
            </div>
        </div>
        <!-- 表单弹窗-->
        <el-dialog
            v-if="dialog.show"
            :title="dialog.title"
            custom-class="dialog"
            :top="dialog.top"
            :visible.sync="dialog.show"
            :width="dialog.width">
            <el-form :model="form" ref="form" label-width="80px">
                <el-form-item :rules="[{ required: true, message: '请输入名称', trigger: 'blur'}]" label="名称：" prop="title">
                    <el-input size="medium"  v-model="form.title" placeholder="请输入名称"></el-input>
                </el-form-item>
                <el-form-item :rules="[{ required: true, message: '请输入链接', trigger: 'blur'}]" label="链接：" prop="link">
                    <el-input size="medium"  v-model="form.link" placeholder="请输入链接"></el-input>
                </el-form-item>
                <el-form-item required label="排序：" prop="sort">
                    <el-input size="medium"  v-model="form.sort" placeholder="请输入排序"></el-input>
                </el-form-item>
                <el-form-item required label="新窗口：" prop="target">
                    <el-radio-group size="medium" v-model="form.target">
                        <el-radio :label="2" border>否</el-radio>
                        <el-radio :label="1" border>是</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item required label="状态：" prop="status">
                    <el-radio-group size="medium" v-model="form.status">
                        <el-radio :label="1" border>正常</el-radio>
                        <el-radio :label="2" border>锁定</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="medium" @click="dialog.show = false">取 消</el-button>
                <el-button type="primary" size="medium" @click="update()">确 定</el-button>
              </span>
        </el-dialog>
    </div>
</template>
<!---->
<script>
import {mapGetters} from 'vuex';
import {LinkList,LinkUpdate,LinkDestroy,LinkLock,LinkActive} from '../../utils/request';
export default {
    computed: {
        ...mapGetters(['meta_name','loading','upload']),
    },
    data() {
        return {
            listData: [],//列表数据
            params: {page: 1, kwd: '', status: 0},
            dialog: {
                title: '',
                top: '15vh',
                show: false,
                width: '600px'
            },
            form:null,
        }
    },
    activated() {
        this.list();
    },
    methods: {
        //新增
        create(){
            this.form = {
                id: 0,
                title: '',
                link: '',
                target: 2,
                status: 1,
                sort: 0,
            };
            this.dialog.title = '新增友情链接';
            this.dialog.show = true;
        },
        //编辑
        edit(info){
            this.form = {
                id: info.id,
                title: info.title,
                link: info.link,
                target: info.target,
                status: info.status,
                sort: info.sort,
            };
            this.dialog.title = '编辑友情链接';
            this.dialog.show = true;
        },
        //列表
        list(){
            this.$store.dispatch('setLoading', true);
            LinkList({params: this.params}).then((res)=>{
                if (res.code) {
                    this.$notify.error({title: 'ERROR', message: res.msg});
                } else {
                    this.listData = res.data;
                }
                this.$store.dispatch('setLoading', false);
            })
        },
        //更新
        update(){
            this.$refs['form'].validate((valid) => {
                if (valid) {
                    LinkUpdate(this.form).then((res)=>{
                        if(res.code){
                            this.$notify.error({title: 'ERROR', message: res.msg});
                        }else{
                            this.$notify({
                                type: 'success',
                                duration:1000,
                                title: 'SUCCESS',
                                message: res.msg, onClose:()=>{
                                    this.dialog.show = false;
                                    this.list();
                                }});
                        }
                    });
                }
            });
        },
        //筛选
        search(){
            this.params.page = 1;
            this.list();
        },
        //分页
        changePage(val) {
            this.params.page = val;
            this.list();
        },
        //锁定
        lock(id){
            LinkLock({id: id}).then((res) => {
                if (res.code) {
                    this.$notify.error({title: 'ERROR', message: res.msg});
                } else {
                    this.list();
                }
            });
        },
        //启用
        active(id){
            LinkActive({id: id}).then((res) => {
                if (res.code) {
                    this.$notify.error({title: 'ERROR', message: res.msg});
                } else {
                    this.list();
                }
            });
        },
        //删除
        destroy(id){
            this.$confirm('确定要删除该友情链接信息吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                LinkDestroy({id: id}).then((res) => {
                    if (res.code) {
                        this.$notify.error({title: 'ERROR', message: res.msg});
                    } else {
                        this.list();
                    }
                });
            }).catch(() => {});
        },
    }
}
</script>
